<template>
  <view>
    <view class="card">
      <uni-icons type="staff" size="30" class="left-icon"></uni-icons>
      <view class="content">
        <image src="/static/images/icon.png" class="icon"></image>
        <text class="text">昵称: test</text>
      </view>
    </view>
	
	<view>
	  <navigator url="/pages/qualification/qualification" open-type="navigate" hover-class="navigator-hover">
	    <button class="button">
	      资质证件
	      <uni-icons type="right" size="20"></uni-icons>
	    </button>
	  </navigator>
	  <navigator url="/pages/trainingpaln/trainingpaln" open-type="navigate" hover-class="navigator-hover">
	    <button class="button">
	      培养计划
	      <uni-icons type="right" size="20"></uni-icons>
	    </button>
	  </navigator>
	  <navigator url="/pages/land/land" open-type="navigate" hover-class="navigator-hover">
	    <button class="button">
	      退出登录
	      <uni-icons type="right" size="20"></uni-icons>
	    </button>
	  </navigator>
	</view>
  </view>
</template>

<script>
export default {
  // Add any necessary data and methods here
}
</script>

<style>
.card {
  display: flex;
  padding: 40px;
  margin: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.left-icon {
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.content {
  display: flex;
  align-items: center;
}

.icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  align-self: center;
}

.text {
  font-size: 18px;
  color: #333;
  line-height: 50px; /* Ensure the text is vertically centered with the icon */
}
.button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  background-color: #ffffff;
  color: #000000;
  border: none;
  border-radius: 5px;
  text-align: left;
  padding: 10 10px;
  cursor: pointer;
}
.uni-icons {
  margin-left: 5px; /* Add spacing between text and icon */
}
</style>